<template>
    <van-button type="primary" @click="change">所有数据</van-button>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,i) in arr.value" :key="i">
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.status}}</td>
        </tr>
        </tbody>
    </table>
</template>

<script>
import allData from '../composables/users';
import search from '../composables/search';
import {ref,toRefs,watch,reactive} from 'vue';
export default {
    name: 'plug',
    props:['name','sex','status'],
   /* watch:{
        sex(newVal,oldVal){
            let user ={name:this.name,sex:this.sex,status:this.status};
            this.searchFilterData = search(this.users,user).searchFilterData;
        }
    },*/
    setup(props){
        let arr = ref([]);
        const { users, useUserItems } = allData();
        let {searchFilterData} = search(users,props);
        arr.value = searchFilterData;
        watch(
            () => props.sex,
            (newVal, oldVal) => {
                arr.value = search(users,props).searchFilterData;
            },
        );
        return{
            users,
            useUserItems,
            searchFilterData,
            arr
        }
    },
    data(){
        return {

        }
    },
   /* computed: {
        filteredRepositories () {  }, // 3
        repositoriesMatchingSearchQuery () {  }, // 2
    },
    watch: {
        user: 'getUserRepositories' // 1
    },*/
    methods: {
    },
    mounted () {
        // this.getUserRepositories();
        Promise.all([]).then(res=>{
            // this.items = this.searchFilterData;
        });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
table td,table th{
    border: 1px solid #ddd;
}
</style>